class Enlarge{
    constructor(el,options={}){
        this.el = document.querySelector(el)
        this.img = this.el.querySelector('.img')
        this.mask = this.el.querySelector('.mask')
        this.enlarge = this.el.querySelector('.enlarge')
        this.init()
    }
    init(){
        this.inOut()
        this.maskMove()
        // this.enlargeChange(0,0) 要么不用 要么传俩实参
    }
    inOut(){
        //鼠标移入显示遮罩框 并 显示放大的图
        // this.el.querySelector('.img').onmouseover=()=>{
        //     this.el.querySelector('.mask').style.display='block'
        //     this.el.querySelector('.enlarge').style.display='block'
        // }
        // //移除隐藏
        // this.el.querySelector('.img').onmouseout=()=>{
        //     this.el.querySelector('.mask').style.display='none'
        //     this.el.querySelector('.enlarge').style.display='none'
        // }

        this.img.onmouseover = ()=> this.mask.style.display=this.enlarge.style.display='block'
        this.img.onmouseout = ()=> this.mask.style.display=this.enlarge.style.display='none'
    }
    maskMove(){
        this.img.onmousemove = (evt)=>{
            let e = evt||window.event
            let left = e.pageX - this.el.offsetLeft - this.mask.offsetWidth/2
            let top = e.pageY - this.el.offsetTop - this.mask.offsetHeight/2
            if(left<0) left=0+'px'
            if(top<0)  top=0+'px'
            if(left>this.img.offsetWidth-this.mask.offsetWidth) left=this.img.offsetWidth-this.mask.offsetWidth
            if(top>this.img.offsetHeight-this.mask.offsetHeight)top=this.img.offsetHeight-this.mask.offsetHeight
            
        
            this.mask.style.left = left+'px'
            // console.log( this.mask.style.left);
            this.mask.style.top = top+'px'
            // console.log( this.mask.style.top);
            this.enlargeChange(left, top)
        }
    }
    enlargeChange(left, top){
        this.enlarge.style.backgroundPosition=`-${left*2}px -${top*2}px`
    }
}
export default Enlarge